<template>
    <div :class="classes">
        <button
            class="vl-btn"
            :type="htmlType"
            :disabled="disabled"
            @click="handleClick">
            <span v-if="showSlot" ref="slot">
                <slot></slot>
            </span>
        </button>
    </div>
</template>

<script>
    import { inIndexOf } from '@/utils/index';

    const prefixCls = 'vl-button';

    export default {
        name: 'vButton',
        props: {
            // 按钮类型：默认按钮、主按钮(primary)、幽灵按钮(ghost)、虚线按钮(dashed)、文字按钮(text)、信息按钮(info)、成功按钮(success)、警告按钮(warning)、错误按钮(error)。
            'type': {
                validator (value) {
                    return inIndexOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
                }
            },
            // 按钮形状：默认按钮、圆形按钮(circle)、方形按钮(square)、椭圆按钮(ellipse)。
            'shape': {
                validator (value) {
                    return inIndexOf(value, ['circle', 'square', 'ellipse']);
                }
            },
            // 按钮大小：默认按钮(default)、小按钮(small)、大按钮(large)。
            'size': {
                validator (value) {
                    return inIndexOf(value, ['small', 'default', 'large']);
                }
            },
            // 设置按钮为禁用状态
            'disabled': {
                type: Boolean,
                default: false,
            },
            // 设置按钮的长度为100%
            'long': {
                type: Boolean,
                default: false
            },
            // 设置button原生的type，可选值为button、submit、reset
            'htmlType': {
                default: 'button',
                validator (value) {
                    return inIndexOf(value, ['button', 'submit', 'reset']);
                }
            }
        },
        data () {
            return {
                showSlot: true,
            }
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-${this.type}`]: !!this.type,
                        [`${prefixCls}-${this.shape}`]: !!this.shape,
                        [`${prefixCls}-${this.size}`]: !!this.size,
                        [`${prefixCls}-long`]: this.long,
                    }
                ];
            }
        },
        mounted () {
            this.showSlot = !!this.$slots.default;
        },
        methods: {
            handleClick (event) {
                this.$emit('click', event);
            }
        },
    }
</script>

<style lang="scss">
.vl-button {
    display: inline-block;
    vertical-align: top;

    &.vl-button-primary .vl-btn {
        color: #fff;
        background-color: #2d8cf0;
        border-color: #2d8cf0;

        &:hover {
            color: #fff;
            background-color: #57a3f3;
            border-color: #57a3f3;
        }
    }

    &.vl-button-ghost .vl-btn {
        color: #495060;
        background-color: #fff;
        border-color: #dddee1;

        &:hover {
            color: #57a3f3;
            background-color: #fff;
            border-color: #57a3f3;
        }
    }

    &.vl-button-dashed .vl-btn {
        color: #495060;
        background-color: #fff;
        border-color: #dddee1;
        border-style: dashed;

        &:hover {
            color: #57a3f3;
            background-color: #fff;
            border-color: #57a3f3;
        }
    }

    &.vl-button-text .vl-btn {
        color: #495060;
        background-color: transparent;
        border-color: transparent;

        &:hover {
            color: #57a3f3;
            background-color: transparent;
            border-color: transparent;
        }
    }

    &.vl-button-info .vl-btn {
        color: #fff;
        background-color: #2db7f5;
        border-color: #2db7f5;

        &:hover {
            color: #fff;
            background-color: #57c5f7;
            border-color: #57c5f7;
        }
    }

    &.vl-button-success .vl-btn {
        color: #fff;
        background-color: #19be6b;
        border-color: #19be6b;

        &:hover {
            color: #fff;
            background-color: #47cb89;
            border-color: #47cb89;
        }
    }

    &.vl-button-warning .vl-btn {
        color: #fff;
        background-color: #f90;
        border-color: #f90;

        &:hover {
            color: #fff;
            background-color: #ffad33;
            border-color: #ffad33;
        }
    }

    &.vl-button-error .vl-btn {
        color: #fff;
        background-color: #ed3f14;
        border-color: #ed3f14;

        &:hover {
            color: #fff;
            background-color: #f16543;
            border-color: #f16543;
        }
    }



    &.vl-button-circle .vl-btn {
        border-radius: 16px;
    }

    &.vl-button-square .vl-btn {
        border-radius: 0;
    }

    &.vl-button-ellipse .vl-btn {
        border-radius: 10px;
    }



    &.vl-button-small .vl-btn {
        height: 24px;
        padding: 0 10px;
    }

    &.vl-button-large .vl-btn {
        height: 36px;
        padding: 0 20px;
        font-size: 14px;
    }



    &.vl-button-long, &.vl-button-long .vl-btn {
        width: 100%;
    }

    .vl-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 32px;
        line-height: 1;
        padding: 0 15px;
        border: 1rpx solid transparent;
        border-radius: 4px;
        font-size: 12px;
        user-select: none;
        outline: none;
        cursor: pointer;
        transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
        color: #495060;
        background-color: #f7f7f7;
        border-color: #dddee1;

        &:hover {
            color: #57a3f3;
            background-color: #fff;
            border-color: #57a3f3;
        }

        &[disabled] {
            color: #bbbec4;
            background-color: #f7f7f7;
            border-color: #dddee1;
            cursor: not-allowed;
        }
    }
}
</style>